<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar>
      <!-- 自定义左侧 -->
      <template #left>
        <div class="logo"></div>
      </template>

      <template #right>
        <van-button @click="$router.push('/search')" round icon="search" type="primary">搜索</van-button>
      </template>
    </van-nav-bar>

    <!-- 频道栏 -->
    <van-tabs v-model="active">
      <!-- title每个标签页的标题，也就是频道的名字 -->
      <!-- 在van-tab里就放了这个频道下的内容 -->
      <van-tab v-for="item in ownChannels" :key="item.id" :title="item.name">
        <!-- 新闻列表 -->
        <article-list :channel_id="item.id" />
      </van-tab>

      <div class="icon-wrap">
        <van-icon @click="showChannel = true" name="wap-nav" />
      </div>
    </van-tabs>

    <van-action-sheet v-model="showChannel" title="频道管理">
      <!-- 频道管理组件 -->
      <!-- 
        :value="active" ,这是在把父里的active传递给子里的value
        @input="active = $event"，这是在把子里传递过来的数据，给父的active
      -->
      <!-- <channel-edit
        :ownChannels="ownChannels"
        :allChannels="allChannels"
        @close="showChannel = false"
        :value="active"
        @input="active = $event"
      /> -->

      <!-- 
         因为v-model相当于是一个语法糖
         它相当于帮你生成 :value="数据" 以及 @input="数据=$event"
         所以你写一个 v-model="active"
         相当于帮你生成了 :value="active" 以及 @input="active = $event"
       -->
      <channel-edit
        :ownChannels="ownChannels"
        :allChannels="allChannels"
        @close="showChannel = false"
        v-model="active"
        @fixActive="active--"
      />
    </van-action-sheet>
  </div>
</template>

<script>
import { ownChannelAPI, allChannelAPI } from '@/api'
// 导入新闻列表组件
import articleList from './articleList.vue'
// 导入频道管理组件
import channelEdit from './channelEdit.vue'

export default {
  components: {
    articleList,
    channelEdit
  },

  data() {
    return {
      ownChannels: [],
      allChannels: [],
      showChannel: false,
      active: 0
    }
  },
  async created() {

    // 读取本地存储
    let local = JSON.parse(window.localStorage.getItem('HMTT81_CHANNELS'))

    // 获取我的频道
    if (this.$store.state.tokenObj.token || !local) {
      // 代表登录了，就发请求
      let res1 = await ownChannelAPI()
      this.ownChannels = res1.data.data.channels
      
    } else {

        // 代表有数据，就取出来给ownChannels
        this.ownChannels = local
    }

    // 获取所有频道
    let res2 = await allChannelAPI()
    this.allChannels = res2.data.data.channels
  },

  destroyed () {
    console.log('home销毁了')
  }
}
</script>

<style scoped lang="less">
.van-nav-bar {
  .logo {
    width: 120px;
    height: 100%;
    // 在脚手架5以前，也就是比如脚手架4的版本
    // 问题在于在样式中无法用 @ 代表src
    // 因为@在less中有特殊含义，所以在css里要用@代表src
    // 前面要加 ~@
    // 所以如果版本是脚手架4，那这里就要改成 url(~@/assets/logo.png)
    background: url(@/assets/logo.png) no-repeat center / contain;
  }

  .van-button {
    width: 100px;
    height: 35px;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;

    .van-icon-search {
      color: #fff;
    }
  }
}

.van-tabs {
  ::v-deep .van-tabs__wrap {
    width: 340px;
  }

  .icon-wrap {
    position: absolute;
    right: 0;
    top: 0;
    width: 35px;
    height: 35px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;

    .van-icon {
      font-size: 30px;
    }
  }
}
</style>
